<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>我来请请你看电影</h1>
      <ul>
        <li v-for="item,index in movie" :key="item.id">
          <img :src="item.url" alt="" width="100" />
          <h3>电影名称是:{{item.name}}--{{index}}</h3>
        </li>
      </ul>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            movie: [
              {
                id: "001",
                name: "独行月球",
                url: "https://puui.qpic.cn/vcover_hz_pic/0/mzc002000y0q8uy1663560447062/0",
              },
              {
                id: "002",
                name: "新神榜：杨戬",
                url: "https://puui.qpic.cn/vcover_hz_pic/0/mzc00200mjy32e71663670004536/0",
              },
              {
                id: "003",
                name: "南游记之闹三界",
                url: "https://puui.qpic.cn/vcover_hz_pic/0/mzc002000caagdg1666890499964/0",
              },
            ],
          };
        },
      });
    </script>
  </body>
</html>
